<template>
  <div>
    <photo-view :list="list" @close="close" />
    <el-scrollbar :height="height" ref="scrollbarRef">
      <el-row style="margin-bottom: 5px">
        <p class="pinformation">公式列表</p>
        <p class="totalStyle">共{{ form.formulaList.length }}条数据</p>
      </el-row>
      <el-table :data="form.formulaList" ref="jgbsTableRef" class="business" border style="margin-bottom: 5px">
        <el-table-column label="序号" type="index" width="70" />
        <el-table-column label="检测类别" align="center">
          <template #default="scope">{{ getJclbName(scope.row) }}</template>
        </el-table-column>
        <el-table-column label="公式" align="center" prop="resultExpress">
          <template #default="scope">
            <span v-html="transformation(scope.row.resultExpress)"></span>
          </template>
        </el-table-column>
        <el-table-column label="报告结果值" align="center">
          <template #default="scope">
            <template v-if="scope.row.isResult == 0">是</template>
            <template v-if="scope.row.isResult == 1">否</template>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="success" icon="EditPen" @click="formulaView(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row style="margin-bottom: 5px; margin-top: 5px">
        <p class="pinformation">结果表示截图</p>
        <p class="totalStyle">共{{ form.resultFileList.length }}条数据</p>
      </el-row>
      <el-table :data="form.resultFileList" class="business" border ref="jgFileTableRef" style="margin-bottom: 5px">
        <el-table-column label="截图编号" align="center" prop="fileCode" width="220" />
        <el-table-column label="截图名称" align="center">
          <template #default="scope">
            <span @click="list = scope.row.fileList" class="fileNameHover">{{
              scope.row.fileMc
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-bottom: 5px; margin-top: 5px">
        <p class="pinformation" style="margin-top: 11px">修约规则</p>
        <p class="totalStyle" style="margin-top: 8px">
          共{{ form.ruleList.length }}条数据
        </p>
        <el-col :span="6">
          <el-form-item label="低于检出限原始记录表达：">
            <el-select style="width: 90%" placeholder="请选择" v-model="queryForm.checkLimitTableId"
              @change="checkLimitChange">
              <el-option v-for="dict in sys_limit_item" :key="dict.value" :label="dict.label"
                :value="parseInt(dict.value)"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="低于检出限报告表达：">
            <el-select style="width: 90%" placeholder="请选择" v-model="queryForm.checkLimitReportId"
              @change="checkLimitChange">
              <el-option v-for="dict in sys_limit_item" :key="dict.value" :label="dict.label"
                :value="parseInt(dict.value)"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-table :data="form.ruleList" class="business" border ref="jgRuleTableRef" style="margin-bottom: 5px">
        <el-table-column label="条件" align="center">
          <template #default="scope">
            <dict-tag :options="sys_rule_condition" :value="scope.row.conditionId" />
          </template>
        </el-table-column>
        <el-table-column label="条件值" align="center" prop="conditionValue" />
        <el-table-column label="规则" align="center" prop="ruleTypeId">
          <template #default="scope">
            <dict-tag :options="sys_rule2" :value="scope.row.ruleTypeId" />
          </template>
        </el-table-column>
        <el-table-column label="规则约束" align="center" prop="ruleConditionId">
          <template #default="scope">
            <dict-tag :options="sys_rule_condition" :value="scope.row.ruleConditionId" />
          </template>
        </el-table-column>
        <el-table-column label="规则值" align="center" prop="ruleValue" />
      </el-table>
      <el-row style="margin-bottom: 5px; margin-top: 5px">
        <p class="pinformation">修约规则截图</p>
        <p class="totalStyle">共{{ form.ruleFileList.length }}条数据</p>
      </el-row>
      <el-table :data="form.ruleFileList" border ref="ruleFileTableRef" style="margin-bottom: 5px">
        <el-table-column label="截图编号" align="center" prop="fileCode" width="220" />
        <el-table-column label="截图名称" align="center">
          <template #default="scope">
            <span @click="list = scope.row.fileList" class="fileNameHover">{{
              scope.row.fileMc
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <el-dialog :class="'el-dialog-theme3'" :title="title" v-model="open" width="1100" append-to-body
      draggable :close-on-click-modal="false">
      <el-form label-width="120" :model="subForm" ref="subRef">
        <el-form-item label="检测类别：" prop="jclbIds" :disabled="disabled">{{
          proxy.getItemByArrays(
            optionJclbList,
            "jclbId",
            subForm.jclbIds,
            "jclbName"
          ) || "/"
        }}</el-form-item>
        <el-row style="margin-bottom: 5px; margin-top: 5px">
          <p class="pinformation">公式参数列表</p>
          <p class="totalStyle">
            共
            {{ subForm.paramList.length }}
            条数据
          </p>
        </el-row>
        <el-table :data="subForm.paramList" class="business x-table" border max-height="37vh">
          <el-table-column label="参数" align="center" prop="paramName" width="120">
            <template #default="scope">
              <span v-html="transformation(scope.row.paramName)" v-if="scope.row.paramUnit"></span>
            </template>
          </el-table-column>
          <el-table-column label="参数表示" align="center" width="100">
            <template #default="scope">
              <div v-html="transformation(scope.row.paramName)"></div>
            </template>
          </el-table-column>
          <el-table-column label="参数单位" align="center" prop="paramUnit" width="100">
            <template #default="scope">
              <span v-html="transformation(getUnitName(scope.row.paramUnit))" v-if="scope.row.paramUnit"></span>
            </template>
          </el-table-column>
          <el-table-column label="参数描述" align="center" prop="paramDesc" />
        </el-table>
        <el-row style="margin-bottom: 5px; margin-top: 5px">
          <el-col :span="3">
            <p class="pinformation">公式表达</p>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 5px">
          <el-col :span="3">
            <el-form-item label-width="50" prop="resultId">
              <span v-html="transformation(getParamName(subForm.resultId))" v-if="subForm.resultId"></span>
            </el-form-item>
          </el-col>
          <el-col :span="1" style="text-align: center; line-height: 2.5">&nbsp;=&nbsp;</el-col>
          <el-col :span="19">
            <el-form-item label-width="1" prop="formulaExpress">
              <span v-html="transformation(subForm.formulaExpress)" v-if="subForm.formulaExpress"></span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 5px; margin-top: 5px">
          <el-col :span="3">
            <p class="pinformation">公式属性</p>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 5px">
          <el-col :span="9">
            <el-form-item label="是否为最终结果公式：" label-width="180" prop="isResult">
              <span v-if="subForm.isResult == 0">是</span>
              <span v-if="subForm.isResult == 1">否</span>
            </el-form-item>
          </el-col>
          <el-col :span="9" v-show="subForm.isResult == 1">
            <el-form-item label="修约跟随参数：" label-width="140">
              <span v-if="subForm.followParam == 0">是</span>
              <span v-if="subForm.followParam == 1">否</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 5px" v-show="subForm.isResult == 1 && subForm.followParam == 1">
          <el-col :span="10">
            <el-form-item label="修约规则：" label-width="100">
              <dict-tag :options="sys_rule1" :value="subForm.ruleId" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="修约方式：" label-width="100">
              <span v-if="subForm.modeId == 0">保留小数点位数</span>
              <span v-if="subForm.modeId == 1">保留有效数字位数</span>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="修约位数：" label-width="100">{{
              subForm.digitCount
            }}</el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 5px; margin-top: 5px">
          <el-col :span="3">
            <p class="pinformation">公式截图</p>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 5px">
          <fileUpload v-model="subForm.fileList" :isLocal="false" :isDisplay="false"></fileUpload>
        </el-row>
        <el-form-item label="备注：" label-width="100">
          {{ subForm.remark || "/" }}
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="cancelFormula">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { allListJclb } from "@/api/store/jclb";
import { addJgbs } from "@/api/store/method";
import useMethodStore from "@/store/modules/method";
import { getUnitList } from "@/api/store/unit";

const { proxy } = getCurrentInstance();
const methodStore = useMethodStore();
const methodId = computed(() => methodStore.methodId);
const resultForm = computed(() => methodStore.resultForm);
const disabled = ref(false);
const { sys_rule1, sys_rule2, sys_rule_condition, sys_limit_item } =
  proxy.useShareDict(
    "sys_rule1",
    "sys_rule2",
    "sys_rule_condition",
    "sys_limit_item"
  );
const title = ref("");
const open = ref(false);
const fileOpen = ref(false);
const optionJclbList = ref([]);
const optionParam = ref([]);
const queryForm = ref({});
const unitList = ref([]);

const subRef = ref(""); // 公共参数设置表单别名

const data = reactive({
  subForm: {
    fileList: [],
    paramList: [],
    followParam: 0,
    isResult: 1,
  },
  fileForm: {
    fileList: [],
  },
  form: {
    ruleFileList: [],
    resultFileList: [],
    formulaList: [],
    ruleList: [],
  },
});
const { form, subForm, fileForm } = toRefs(data);

getUnitList().then((res) => {
  unitList.value = res.data;
});

watch(resultForm, () => {
  form.value = resultForm.value;
  if (form.value.checkLimitTableId) {
    queryForm.value.checkLimitTableId = form.value.checkLimitTableId;
  }
  if (form.value.checkLimitReportId) {
    queryForm.value.checkLimitReportId = form.value.checkLimitReportId;
  }
});

watch(
  () => data.subForm.paramList,
  (now) => {
    if (!now) return;
    optionParam.value = now.map((item) => {
      return { value: item.paramId, label: item.paramName };
    });
  },
  { deep: true }
);
allListJclb().then((res) => {
  optionJclbList.value = res.data;
});

function formulaView(row) {
  open.value = true;
  title.value = "查看公式";
  subForm.value = row;
  subForm.value.jclbIds = subForm.value.jclbIds.split(",");
}

function cancelFormula() {
  open.value = false;
  proxy.resetForm("subRef");
}
function getJclbName(row) {
  var a = [];
  var temp;
  if (row.jclbIds instanceof Array) {
    temp = row.jclbIds;
  } else {
    temp = row.jclbIds.split(",");
  }
  optionJclbList.value.find((item1) => {
    temp.forEach((item2) => {
      if (item1.jclbId == item2) {
        a.push(item1.jclbName);
      }
    });
  });
  if (a) {
    return a.join(",");
  }
}

function checkLimitChange() {
  if (!queryForm.value.methodId) {
    queryForm.value.methodId = methodId.value;
  }
  addJgbs(queryForm.value).then((res) => {
    proxy.$modal.msgSuccess("保存成功");
  });
}

function transformation(row) {
  const a = proxy.getSupAndSub(row);
  return a;
}

function getUnitName(row) {
  return proxy.getItemByArray(unitList.value, "unitId", row, "unitName");
}
function getParamName(row) {
  return proxy.getItemByArray(optionParam.value, "value", row, "label");
}

const height = ref();

function getHeight() {
  nextTick(() => {
    height.value = proxy.getSubFileHeight(proxy, "scrollbarRef");
  });
}

const list = ref([])
function close() {
  list.value = []
}

onMounted(() => {
  nextTick(function () {
    getHeight();
    window.addEventListener("resize", getHeight);
  })
})

onUpdated(() => {
  getHeight()
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});
</script>

<style scoped>
/* 新增/编辑公式dialog => 鼠标悬停在表格的某一项改变鼠标指针状态 */
:deep(.x-table .el-table__row) {
  cursor: pointer;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}
</style>
